<template>
  <el-drawer
    append-to-body
    v-model="modalVisible"
    direction="rtl"
    :with-header="false"
    size="1000"
  >
    <template #default>
      <div class="select-goods-body">
        <div class="goods-cate-box">
          <el-tree
            highlight-current
            :data="goodsCategroyList"
            :expand-on-click-node="false"
            :props="{
              children: 'children',
              label: 'cate_name',
            }"
            icon="ArrowRight"
            @current-change="selectCateChange"
          />
        </div>
        <div class="goods-table-box">
          <selectGoodsCheckbox
            v-model:ids="selectedGoodsIds"
            v-model:data="selectedGoodsData"
            ref="selectGoodsCheckboxRef"
            :visible="modalVisible"
          ></selectGoodsCheckbox>
        </div>
      </div>
    </template>
    <template #footer>
      <div>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="selectOk">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
  <script lang="ts">
export default {
  name: "selectGoodsModal",
};
</script>
  <script setup lang="ts">
import { ref, getCurrentInstance, watch, nextTick, onMounted } from "vue";
import selectGoodsCheckbox from "./checkbox.vue";
import { getGoodsCateList } from "@/api/store/goods_cate";
import { Result, ResultError } from "@/types";
import type { ElTable } from "element-plus";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

type idsType = Array<string | number>;

const props = withDefaults(
  defineProps<{
    title?: string;
    ids: idsType;
    data: any;
  }>(),
  {
    title: "选择商品",
    ids: () => {
      return [];
    },
    data: [],
  }
);
const modalVisible = ref<boolean>(false);

const emit = defineEmits(["update:ids", "update:data", "change"]);

const selectedGoodsIds = ref<idsType>(props.ids);

const selectedGoodsData = ref<any>(props.data);

// 确定选择
const selectOk = () => {
  var obj = proxy?.$refs["selectGoodsCheckboxRef"]?.getData();
  emit("update:ids", obj.ids);
  emit("update:data", obj.data);
  emit("change", JSON.parse(JSON.stringify(obj)));
  close();
};

const initLoading = ref<boolean>(true);

const goodsCategroyList = ref<any>([]);

//   获取商品菜单
const toInitGoodsCategroy = () => {
  getGoodsCateList({})
    .then((res: Result) => {
      goodsCategroyList.value = res.data;
      goodsCategroyList.value.unshift({
        cate_name: "全部",
        children: [],
        id: 0,
      });
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const selectCateChange = (res: any) => {
  toInit(res.id);
};

const selectGoodsCheckboxRef = ref<HTMLElement>();

const toInit = (cateId: number) => {
  nextTick(() => {
    proxy?.$refs["selectGoodsCheckboxRef"]?.toInit(cateId);
  });
};

const open = (ids: idsType, data: any = []) => {
  selectedGoodsData.value = data;
  selectedGoodsIds.value = ids;
  modalVisible.value = true;
  toInit(0);
};

const close = () => {
  modalVisible.value = false;
};

onMounted(() => {
  toInitGoodsCategroy();
});
defineExpose({ open });
</script>
  <style scoped>
.select-goods-body {
  height: 100%;
  width: 100%;
  border: 1px solid var(--el-border-color-lighter);
  display: flex;
  justify-content: space-between;
}
.goods-cate-box {
  width: 160px;
  height: calc(100% - 20px);
  border-right: 1px solid var(--el-border-color-lighter);
  padding: 10px;
}
.goods-table-box {
  width: calc(100% - 160px);
  height: calc(100% - 20px);
  padding: 10px;
  position: relative;
}
</style>